import React from 'react';
import { Form, Icon, Input, Button, notification,Image,Card,message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './signIn.less';
import { withRouter } from 'react-router';
// import styles from 'style-loader!css-loader?modules!./index.css';
import API from '@common/api.js';
import bcrypt from 'bcryptjs';
import { Link } from 'react-router-dom';
import cqu from '@images/cqu.png';
class Login extends React.Component {

  async onFinish(values) {
    console.log('Success:', values);
    console.log(await API.login(values));
    this.props.history.push("/");
    // const {username,password} = values;
    // const result = await reqLogin(username,password)
  };
  render() {
    return (
    <div >
      <div className="bg" />
      <Card
        id="signInCard"
        bordered={false}
        style={{ maxWidth: 350 }}
      >
          <img  className="cquLogo"
            alt="logo"
            src={cqu}
          />
        <h1 className="head1">

           CQU 校园论坛
        </h1>
        <Form className="login-form" className="container"
          onFinish={(values) => { this.onFinish(values); }} >
          <Form.Item 
            // label="username"
            name="username"
            rules={[{
              required: true,
              message: '请输入用户名!'
            }]}>
            <Input
              className="usernameInput"
              placeholder="请输入用户名"
              prefix={
                <UserOutlined />
              }
            />
          </Form.Item>
          <Form.Item
            name="password"
            // label="password"
            rules={[{
              required: true,
              message: '请输入密码!'
            }]}>
            <Input.Password
              className="passwordInput"
              placeholder="请输入密码"
              prefix={
                <LockOutlined />
              } />
          </Form.Item>
          <Image src={API.getCaptchaAddress()} />
          <Form.Item
            name="code"
            // label="Verification Code"
            rules={[{
              required: true,
              message: '请输入验证码!'
            }]}>
            <Input
              className="verCodeInput"
              label="VerCode" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" block>
              登录
            </Button>
          </Form.Item>
        </Form>
        <div className='goToRegister'>
          没有账号？
          <Link to='/register'>立即注册</Link>
        </div>
        </Card>
      </div>
    );
  }
}

export default withRouter(Login);